<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			页面中的元素都是靠着左上摆放的。
			*/
			.box1 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin-top: 100px;
				margin-left: 100px;
				border: 10px red solid;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				如果是 marigin-left: auto 那么左外边距将是最大值。
				如果 左右都是auto 那么两侧的外边距都是相同的值。
				那么元素在父元素居中。
				但是“内边距”就不能这样设置。
				*/
				margin-left: auto;
				margin-right: auto;
				/* margin: auto; */
				border: 10px red solid;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
